<template>
    <div
        class="randommiddlerisklevel"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <cardComponent pageTitle="中风险业务动态身份验证">
            <template slot="cardBody">
                <div class="pageTips">
                    <div class="leftBox">
                        <p>
                            <span :style="{display: 'inline-block', width: '50px'}">提示：</span>主卡人核实A类问题*2，附卡人核实B类问题*2。主代附加核附卡人姓名、证件号码、与主卡人关系。
                        </p>
                        <p>
                            <span :style="{display: 'inline-block', width: '50px'}"></span>必核项答错一个则不再继续身份核实，选核项累计答错2个则不再继续身份核实。
                        </p>
                    </div>
                    <div class="rightBox">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handlePass"
                            :disabled="passFlag"
                        >通 过</el-button>
                    </div>
                </div>

                <!-- IVR核实项 -->
                <el-card class="box-card">
                    <div slot="headerss" class="clearfix">
                        <span>IVR核实项</span>
                    </div>
                    <div class="container">
                        <el-row>
                            <el-col :span="12">
                                <span class="title">是否通过电话查询密码认证:</span>
                                <span class="text">否</span>
                            </el-col>
                            <el-col :span="12">
                                <span class="title">是否通过交易密码认证:</span>
                                <span class="text">否</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <!-- 必核项 -->
                <el-card class="box-card">
                    <div slot="headerss" class="clearfix">
                        <span>必核项</span>
                    </div>
                    <div class="container">
                        <el-row>
                            <el-col
                                :span="8"
                                v-for="(item, index) in mustQuestion"
                                :key="item.id"
                                class="questionItem"
                            >
                                <span class="title">{{ item.label + ':'}}</span>
                                <span class="text" v-if="item.code === '3002.KEYTYPE'">
                                    <el-checkbox
                                        :label="item.checkFlag"
                                        @change="handleChange($event, 'mustQuestion', index)"
                                    >{{ item.text | getFormatValue(idTypeList) }}</el-checkbox>
                                </span>
                                <span class="text" v-else>
                                    <el-checkbox
                                        :label="item.checkFlag"
                                        @change="handleChange($event, 'mustQuestion', index)"
                                    >{{ item.text }}</el-checkbox>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <!-- A类选核项 -->
                <el-card class="box-card">
                    <div slot="headerss" class="clearfix">
                        <span>A类选核项</span>
                    </div>
                    <div class="container">
                        <el-row>
                            <el-col
                                :span="8"
                                v-for="(item, index) in questionA"
                                :key="item.id"
                                class="questionItem"
                            >
                                <span class="title">{{ item.label + ':'}}</span>
                                <span class="text">
                                    <el-checkbox
                                        :label="item.checkFlag"
                                        @change="handleChange($event, 'questionA', index)"
                                    >{{ item.text }}</el-checkbox>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <!-- B类选核项 -->
                <el-card class="box-card">
                    <div slot="headerss" class="clearfix">
                        <span>B类选核项</span>
                    </div>
                    <div class="container">
                        <el-row>
                            <el-col
                                :span="8"
                                v-for="(item, index) in questionB"
                                :key="item.id"
                                class="questionItem"
                            >
                                <span class="title">{{ item.label + ':'}}</span>
                                <span class="text">
                                    <el-checkbox
                                        :label="item.checkFlag"
                                        @change="handleChange($event, 'questionB', index)"
                                    >{{ item.text }}</el-checkbox>
                                </span>
                            </el-col>
                        </el-row>
                    </div>
                </el-card>

                <!-- 申请记录查询列表 -->
                <apply-list />

                <!-- 联系人信息 -->
                <contact-list />

                <!-- 联系人信息 -->
                <supplement-card-list />
            </template>
        </cardComponent>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import applyList from './components/applyList.vue';
import contactList from './components/contactList.vue';
import supplementCardList from './components/supplementCardList.vue';
import { getDictSelectList } from '@/utils/Common';

export default {
    name: 'randommiddlerisklevel',
    components: {
        cardComponent,
        'apply-list': applyList,
        'contact-list': contactList,
        'supplement-card-list': supplementCardList,
    },

    data() {
        return {
            pageLoading: false, // 页面loading
            passFlag: true, // 通过按钮 禁用标志
            allMustQuestion: [], // 必核项题库
            allQuestionA: [], // A类题库
            allQuestionB: [], // B类题库
            mustQuestion: [], // 页面展示必核项问题
            questionA: [], // 页面展示的A类问题
            questionB: [], // 页面展示的B类问题
            idTypeList: [], // 证件类型列表
        };
    },

    mounted() {
        this.init();
    },

    // 取缓存信息
    computed: mapState({
        3001: state => state.common.cardAccountInfo_3001, // 卡账户信息
        3002: state => state.common.customerInfo_3002, // 客户信息
        3003: state => state.common.customerAdressInfo_3003, // 客户地址信息
        3004: state => state.common.cardInfo_3004, // 默认卡信息
        cardList_3601: state => state.common.cardList_3601, // 可列表信息
        3014: state => state.common.CreditCardService_3014, // 信用卡服务方式综合查询
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        checkData: state => state.common.checkData, // 检查验证标记字段
        checAllData: state => state.common.checAllData, // 检查验证标记字段
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
    }),

    filters: {
        getFormatValue(val, list) {
            let text = '';
            if (val && val.trim()) {
                list.forEach((item) => {
                    if (item.code === val.trim()) {
                        text = item.label;
                    }
                });
            }
            return text;
        },


    },

    methods: {
        // 初始化查询
        async init() {
            // 证件类型列表
            this.idTypeList = await getDictSelectList('IDTYPE', this);

            // 中风险A类问题
            this.allQuestionA = await getDictSelectList('M_QUESTION_A', this);
            this.questionA = this.getRandomQuestion(true, this.allQuestionA, 5);

            // 中风险B类问题
            this.allQuestionB = await getDictSelectList('M_QUESTION_B', this);
            this.questionB = this.getRandomQuestion(true, this.allQuestionB, 4);

            // 中风险必核项问题
            this.allMustQuestion = await getDictSelectList('M_QUESTION_MUST', this);
            this.mustQuestion = this.getRandomQuestion(false, this.allMustQuestion, 3);
        },

        // 从题库中随机筛选 count 个问题
        getRandomQuestion(isRandom, list, count) {
            const resArr = [];
            if (isRandom) {
                // 获取随机数 数组（0 - list.length-1)
                const indexArr = this.getRandomArray(count, list.length, []);
                // 遍历随机数 获取对应下标问题
                indexArr.forEach((item) => {
                    list[item].checkFlag = false;
                    list[item].text = this.getQuestionValue(list[item].code);
                    resArr.push(list[item]);
                });
            } else {
                list.forEach((item) => {
                    item.checkFlag = false;
                    item.text = this.getQuestionValue(item.code);
                    resArr.push(item);
                });
            }
            return resArr;
        },

        // 生成 count 个 0 - max 的随机数
        getRandomArray(count, max, randomArr) {
            // 生成（0 - max-1 的随机数）
            const num = Math.floor(Math.random() * max);
            // 判断随机数数组中是否已存在此随机数 不存在则添加
            if (randomArr.indexOf(num) === -1) {
                randomArr.push(num);
            }
            // 判断随机数数组长度是否满足需求长度， 不满足则继续添加
            if (randomArr.length < count) {
                return this.getRandomArray(count, max, randomArr);
            }
            return randomArr;
        },

        // 获取问题对应字段的值
        getQuestionValue(val) {
            let text = '';
            let arr;
            if (val && val.trim()) {
                arr = val.split('.');
                if (this[arr[0]]) {
                    if (val === '3003.ADD1') { // 家庭地址
                        text = this[3003].ADD11 + this[3003].ADD12 + this[3003].ADD13 + this[3003].ADD14 + this[3003].ADD15;
                    } else if (val === '3003.ADD2') { // 公司地址
                        text = this[3003].ADD21 + this[3003].ADD22 + this[3003].ADD23 + this[3003].ADD24 + this[3003].ADD25;
                    } else if (val === '3014.ADD') { // 账单地址
                        text = this[3014].ADD1 + this[3014].ADD2 + this[3014].ADD3 + this[3014].ADD4 + this[3014].ADD5;
                    } else {
                        text = this[arr[0]][arr[1]];
                    }
                } else if (val === 'ATTACHEDCARD') {
                    text = this.handleJudgeCard();
                }
            }
            return text;
        },

        // 判断是否有
        handleJudgeCard() {
            let text = '否';
            let flag = false;
            this.cardList_3601.forEach((item) => {
                if ((`${item.MAFLAG}`).trim() !== '1') { // 1=主卡，2-9=附卡
                    flag = true;
                }
            });
            if (flag) { // 有附卡
                text = '是';
            }
            return text;
        },

        // 复选框change事件
        handleChange(e, list, index) {
            this[list][index].checkFlag = e;
            const arr1 = this.mustQuestion.filter(item => item.checkFlag);
            const arr2 = this.questionA.filter(item => item.checkFlag);
            const arr3 = this.questionB.filter(item => item.checkFlag);
            if (arr1.length === 3 && arr2.length >= 2 && arr3.length >= 2) {
                this.passFlag = false;
            } else {
                this.passFlag = true;
            }
        },

        // 点击通过
        handlePass() {
            // let checkData = JSON.parse(JSON.stringify(this.checkData))
            // checkData.authenticationFla_M = true
            // this.$store.commit('common/UPDATE_CHECK_FLAG', checkData)
            // 修改中风险验证开关通过
            this.checAllData.medium.falg = true;
        },
    },
};
</script>

<style lang="scss">
.randommiddlerisklevel {
    .pageTips {
        padding-bottom: 20px;
        padding-top: 10px;
        color: red;
        overflow: hidden;

        .leftBox {
            float: left;
            max-width: 85%;
            p {
                height: 20px;
                line-height: 20px;
                margin-bottom: 10px;
            }
        }
        .rightBox {
            float: right;
            width: 15%;
            text-align: center;
        }
    }
    .box-card {
        margin-bottom: 20px;
        background-color: #f2f6fb;

        .clearfix {
            text-align: center;
        }

        .container {
            .questionItem {
                margin-bottom: 20px;
                .title {
                    padding-right: 10px;
                    display: inline-block;
                    text-align: right;
                    width: 130px;
                }
            }
            .footer {
                margin-top: 20px;
                text-align: right;
            }
        }
    }
}
</style>
